<template>
  <div class="social-callback">
    <div class="callback-container" v-if="loading">
      <el-spin size="large" />
      <p class="loading-text">正在处理授权回调...</p>
    </div>
    <div class="callback-result" v-else>
      <el-result
        :icon="success ? 'success' : 'error'"
        :title="success ? '授权成功' : '授权失败'"
        :sub-title="message">
        <template #extra>
          <el-button type="primary" @click="goHome" v-if="success">返回首页</el-button>
          <el-button type="primary" @click="goBack" v-else>重新尝试</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { socialCallback, login } from '@/api/login'
import useUserStore from '@/store/modules/user'
import { getToken } from '@/utils/Auth'
import { ElMessage } from 'element-plus'
// 全局路径设置
import { INDEX_PATH, LOGIN_PATH } from '@/settings/pathSettings'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const loading = ref(true)
const success = ref(false)
const message = ref('')

// 账号绑定列表
const accountBindList = [
  {
    source: 'gitee',
    title: 'Gitee'
  },
  {
    source: 'github',
    title: 'GitHub'
  },
  {
    source: 'maxkey',
    title: 'MaxKey'
  },
  {
    source: 'wechat',
    title: '微信'
  },
  {
    source: 'dingtalk',
    title: '钉钉'
  }
]

onMounted(async () => {
  // 从路由参数中获取社交登录回调参数
  let code = route.query.code as string
  let state = route.query.state as string
  let provider = route.query.source as string

  // 检查必要参数是否存在
  if (!code && !state && !provider) {
    // 如果没有任何参数，显示友好的提示信息而不是错误
    handleInfo('请通过正确的渠道访问此页面')
    return
  }

  // 检查必要参数
  if (!code || !state || !provider) {
    handleError('缺少必要的回调参数')
    return
  }

  // 检查是否支持该平台
  const currentClient = accountBindList.find(item => item.source === provider)
  if (!currentClient) {
    handleError(`未找到${provider}平台`)
    return
  }

  try {
    // 判断是否已登录
    const token = getToken()

    if (!token) {
      // 未登录状态 - 执行社交登录
      await handleSocialLogin(provider, code, state, currentClient)
    } else {
      // 已登录状态 - 执行社交账号绑定
      await handleSocialBinding(provider, code, state, currentClient)
    }
  } catch (error: any) {
    console.error('授权回调处理失败:', error)
    handleError(error.message || '授权回调处理异常', false)
  }
})

// 处理社交登录（未登录状态）
async function handleSocialLogin(provider: string, code: string, state: string, currentClient: any) {
  try {
    // 使用常规登录接口进行社交登录
    const loginData = {
      authType: 'social', // 设置认证类型为社交登录
      provider: provider, // 社交平台提供商
      code: code, // 授权码
      state: state // 状态码
    }

    // 调用常规登录接口
    const response = await login(loginData)

    if (response.code === "0") {
      // 登录成功，保存token信息
      userStore.setCredential(response.data)
      // 登录成功后直接跳转首页，不显示提示
      // 使用 location.replace 解决 Vue Router history 模式下的 404 问题
      location.replace(INDEX_PATH)
    } else {
      // 无论什么错误，都显示错误信息并自动跳转到登录页面
      handleError(response.message || `${currentClient.title}登录失败`, false)
    }
  } catch (error: any) {
    console.error('社交登录失败:', error)
    handleError(error.message || `${currentClient.title}登录异常`, false)
  }
}

// 处理社交绑定（已登录状态）
async function handleSocialBinding(provider: string, code: string, state: string, currentClient: any) {
  try {
    // 使用社交绑定接口进行账号绑定
    const bindData = {
      source: provider, // 社交平台来源
      socialCode: code, // 授权码
      socialState: state // 状态码
    }

    // 调用社交绑定接口
    const response = await socialCallback(bindData)

    if (response.code === "0") {
      // 绑定成功后直接跳转首页，不显示提示
      // 使用 location.replace 解决 Vue Router history 模式下的 404 问题
      location.replace(INDEX_PATH)
    } else {
      handleError(response.message || `${currentClient.title}授权绑定失败`, false)
    }
  } catch (error: any) {
    console.error('社交绑定失败:', error)
    handleError(error.message || `${currentClient.title}授权绑定异常`, false)
  }
}

function handleSuccess(msg: string) {
  success.value = true
  message.value = msg
  loading.value = false
  ElMessage.success(msg)

  // 操作成功后直接跳转到首页
  // 使用 location.replace 解决 Vue Router history 模式下的 404 问题
  location.replace(INDEX_PATH)
}

function handleError(msg: string, showMessage = true) {
  success.value = false
  message.value = msg
  loading.value = false
  if (showMessage) {
    ElMessage.error(msg)
  }

  // 失败后自动跳转到登录页面
  setTimeout(() => {
    router.push(LOGIN_PATH)
  }, 3000)
}

function handleInfo(msg: string) {
  success.value = false
  message.value = msg
  loading.value = false
  ElMessage.info(msg)

  // 信息提示后自动跳转到登录页面
  setTimeout(() => {
    router.push(LOGIN_PATH)
  }, 3000)
}

function goHome() {
  // 返回首页
  // 使用 location.replace 解决 Vue Router history 模式下的 404 问题
  location.replace(INDEX_PATH)
}

function goBack() {
  // 返回上一页或重新授权
  router.go(-1)
}
</script>

<style scoped>
.social-callback {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
}

.callback-container {
  text-align: center;
}

.loading-text {
  margin-top: 20px;
  font-size: 16px;
  color: #606266;
}

.callback-result {
  width: 100%;
  max-width: 500px;
}
</style>